<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // function proxyFunc(obj) {
        //     return new Proxy(obj, {
        //         get(obj, prop) {
        //             return obj[prop]
        //         },
        //         set(obj, prop, value) {
        //             obj[prop] = value
        //         },
        //         deleteProperty(target, prop) {
        //             delete target[prop]
        //         }
        //     })
        // }
        // 对象
        // let obj = { a: 1, b: 2 }
        // let objProxy = proxyFunc(obj)
        // console.log(obj.a)
        // console.log(objProxy.a)
        // objProxy.a = 2
        // console.log(obj.a)
        // console.log(objProxy.a)
        //触发objProxy的deleteProperty
        //在deleteProperty中删除target.a
        //这是代理的含义
        // delete objProxy.a
        // console.log(obj)

        // 数组
        // let arr = [{ a: 1, b: 2 }]
        // let arrProxy = proxyFunc(arr)
        // console.log(arr[0])
        // console.log(arrProxy[0])
        // arrProxy[0] = { a: 2, b: 2 }
        // console.log(arr[0])
        // console.log(arrProxy[0])

        // 函数
        // let func = function () {
        //     console.log('I am a function')
        // }
        // let funcProxy = proxyFunc(func)
        // funcProxy[0] = { a: 2, b: 2 }
        // console.log(func[0])
        // console.log(funcProxy[0])

        // let obj = { a: 1, b: 2 }
        // let objProxy = new Proxy(obj, {
        //     get(obj, prop) {
        //         console.log('GET')
        //         return obj[prop]
        //     },
        //     set(obj, prop, value) {
        //         console.log("SET")
        //         obj[prop] = value
        //     },
        // })
        // objProxy.c = 3
        // objProxy.c = 4
        // console.log(obj)

        let data = {
            a: {
                b: 1
            },
            c: 22,
            arr: [1, 2, 3]
        };

        // function observe(data) {
        //     Object.keys(data).forEach((key) => {
        //         const currentValue = data[key];
        //         if (typeof(currentValue) === 'object') {
        //             observe(currentValue)
        //             data[key] = new Proxy(currentValue, {
        //                 set(target, property, value, receiver) {
        //                     console.log('set', property);
        //                     return Reflect.set(target,property,value, receiver);
        //                 }
        //             })
        //         } 
        //     })
        // }
        // observe(data);

        data = new Proxy(data, {
            set(target, property, value, receiver) {
                console.log('set', property);
                return Reflect.set(target,property,value, receiver);
            },
            getPrototypeOf(target) {
                console.log(target, 'getPrototypeOf');
                return {};
            }
        });

        // data.a.b = 'bbb';

        // 触发两次，因为arr的length也变了
        // data.arr.push(10000);
        // console.log(data);
        console.log(Object.getPrototypeOf(data));
    </script>
</body>

</html>